<template>
  <div>
    <!-- 头部导航 -->
    <van-nav-bar
      title="个人中心"
      left-text="返回"
      right-text="退出"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <!-- 注册 -->
    <div class="register">
      <span>个人中心 </span>
      <p @click="$router.push('/address')">
        <span>地址管理</span>
        <van-icon name="arrow" />
      </p>
      <p @click="$router.push('/order')">
        <span>订单中心</span>
        <van-icon name="arrow" />
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { useCounterStore } from "../stores/counter";
const counterSrore = useCounterStore();
let router = useRouter();
function onClickLeft() {
  router.go(-1);
}
function onClickRight() {
  localStorage.removeItem("token");
  localStorage.removeItem("userid");
  counterSrore.delToken();
  router.push("/home");
}
</script>

<style scoped>
.register {
  margin: 20px;
  margin-top: 3.125rem;
}
.register > span {
  color: #666;
  font-size: 0.875rem;
  display: block;
  border-radius: 0.3125rem;
  margin-bottom: 0.625rem;
}
.register > p {
  width: 100%;
  height: 2.8125rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  box-sizing: border-box;
  background-color: #fff;
  margin: 0;
  color: #666;
  border-bottom: 0.0625rem solid #e0e0e0;
}
.register > p:nth-of-type(2) {
  border-bottom: none;
}
</style>
